<section class="mobile-card-columns">
  <div class="cards margin-block-end-half">
    <%= render "columns/show/add_card_button", board: board %>
  </div>

  <%= link_to board_columns_not_now_path(board), class: "cards cards--on-deck is-collapsed", style: "--card-color: var(--color-card-complete);", data: { turbo_frame: "_top" } do %>
    <div class="cards__expander btn btn--plain" style="--card-count: <%= board.cards.postponed.count %>">
      <span class="cards__expander-count"><%= board.cards.postponed.count %></span>
      <h2 class="cards__expander-title">
        Not Now
      </h2>
    </div>
  <% end %>

  <%= link_to board_columns_stream_path(board), class: "cards cards--considering is-collapsed", data: { turbo_frame: "_top" } do %>
    <div class="cards__expander btn btn--plain" style="--card-count: <%= board.cards.awaiting_triage.count %>">
      <span class="cards__expander-count"><%= board.cards.awaiting_triage.count %></span>
      <h2 class="cards__expander-title">
        Maybe?
      </h2>
    </div>
  <% end %>

  <% board.columns.sorted.each do |column| %>
    <%= link_to board_column_path(column.board, column), class: "cards cards--doing is-collapsed", style: "--card-color: #{column.color}", data: { turbo_frame: "_top" } do %>
      <div class="cards__expander btn btn--plain" style="--card-count: <%= column.cards.active.count %>">
        <span class="cards__expander-count"><%= column.cards.active.count %></span>
        <h2 class="cards__expander-title">
          <%= column.name %>
        </h2>
      </div>
    <% end %>
  <% end %>

  <%= link_to board_columns_closed_path(board), class: "cards cards--closed is-collapsed", style: "--card-color: var(--color-card-complete);", data: { turbo_frame: "_top" } do %>
    <div class="cards__expander btn btn--plain" style="--card-count: <%= board.cards.closed.count %>">
      <span class="cards__expander-count"><%= board.cards.closed.count %></span>
      <h2 class="cards__expander-title">
        Done
      </h2>
    </div>
  <% end %>
</section>
